import React,{useState} from 'react'
import './qylxr.css'
import {Table} from 'antd';
import { Pagination } from 'antd';
export default function QYLXR() {
  let data=[
    {
      key:1,
      name:'北京西天取经科技有限公司',
      cont1:'-',
      cont2:'-',
      cont3:'-',
      peo:'张三',
      phone:'+8618888888888',
      com:'xx@qq.com',
      job:'行政',
    },
    {
      key:2,
      name:'华采科技(北京)有限公司',
      cont1:'是',
      cont2:'是',
      cont3:'是',
      peo:'李四',
      phone:'+8618888888888',
      com:'xx@qq.com',
      job:'总经理',
    },
    {
      key:3,
      name:'百度网络科技有限公司',
      cont1:'-',
      cont2:'是',
      cont3:'-',
      peo:'王五',
      phone:'+8618888888888',
      com:'xx@qq.com',
      job:'产品经理',
    }
    ,
    {
      key:4,
      name:'百度网络科技有限公司',
      cont1:'-',
      cont2:'是',
      cont3:'-',
      peo:'王五',
      phone:'+8618888888888',
      com:'xx@qq.com',
      job:'产品经理',
    },
    {
      key:5,
      name:'百度网络科技有限公司',
      cont1:'-',
      cont2:'是',
      cont3:'-',
      peo:'王五',
      phone:'+8618888888888',
      com:'xx@qq.com',
      job:'产品经理',
    }
  ]
  let col=[
    {
        title: '商品名',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '有未开始的租期',
        dataIndex: 'cont1',
        key: 'cont1',
    },
    {
      title: '租期进行中',
      dataIndex: 'cont2',
      key: 'cont2',
    },
    {
      title: '有已结束的租期',
      dataIndex: 'cont3',
      key: 'cont3',
    },
    {
      title: '联系人',
      dataIndex: 'peo',
      key: 'peo',
    },
    {
      title: '联系人手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '联系人邮箱',
      dataIndex: 'com',
      key: 'com',
    },
    {
      title: '联系人职务',
      dataIndex: 'job',
      key: 'job',
    },
    {
        title:'操作',
        dataIndex:'action',
        //参数 record 指的是当前整行数据对象
        render(_,record){
        return    <div>
                <p>设置联系人</p>
            </div>
        }
    }
];
  return (
    <>
      <h2>签约联系人</h2>
      <div class="cont2">
        <div class="inp"><input type="text" placeholder='请输入客户名称' value="" /></div>
        <div class="zqzt">
          <p>租期状态</p>
          <div class="box">
            <div>
              <input type="checkbox" value="" />
              <span>有未开始的租期</span>
            </div>
            <div>
              <input type="checkbox" value="" />
              <span>租期进行中</span>
            </div>
            <div>
              <input type="checkbox" value="" />
              <span>有已结束的租期</span>
            </div>
          </div>
        </div>
        <div class="txt">
            <p>联系人姓名或手机号</p>
            <input type="text"  value="" />
        </div>
        <button>查询</button>
        <button>重置</button>
        <div class="cont1">
        <Table 
          className='tab'
          dataSource={data}
          columns={col}
          pagination={false}
        />
        <Pagination className='pag1' size="small" total={50} showSizeChanger showQuickJumper />
      </div>
      </div>
      
      
    </>
  )
}
